<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIwith.FUN - 科技与乐趣的完美结合</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        /* 全局变量 */
        :root {
            --primary: #4F46E5;
            --primary-light: #6366F1;
            --secondary: #EC4899;
            --secondary-light: #F472B6;
            --accent: #8B5CF6;
            --text-primary: #1F2937;
            --text-secondary: #4B5563;
            --text-tertiary: #6B7280;
            --bg-primary: #FFFFFF;
            --bg-secondary: #F3F4F6;
            --bg-tertiary: #E5E7EB;
            --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --transition-normal: all 0.3s ease;
            --font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
        }

        /* 深色模式变量 */
        [data-theme="dark"] {
            --primary: #6366F1;
            --primary-light: #818CF8;
            --secondary: #F472B6;
            --secondary-light: #F9A8D4;
            --accent: #A78BFA;
            --text-primary: #F9FAFB;
            --text-secondary: #E5E7EB;
            --text-tertiary: #D1D5DB;
            --bg-primary: #111827;
            --bg-secondary: #1F2937;
            --bg-tertiary: #374151;
            --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
        }

        /* 基本样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            transition: var(--transition-normal);
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
            color: var(--primary);
            transition: var(--transition-normal);
        }

        a:hover {
            color: var(--primary-light);
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: var(--bg-primary);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transition: var(--transition-normal);
        }

        .navbar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }

        .logo i {
            margin-right: 8px;
            color: var(--accent);
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 2rem;
        }

        .nav-links a {
            color: var(--text-secondary);
            font-weight: 500;
            position: relative;
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--primary);
            transition: var(--transition-normal);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .theme-toggle {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 1.2rem;
            transition: var(--transition-normal);
        }

        .theme-toggle:hover {
            color: var(--primary);
            transform: rotate(20deg);
        }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* Hero 区域 */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding-top: 80px;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 600px;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            line-height: 1.2;
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: fadeInUp 1s ease;
        }

        .hero-subtitle {
            font-size: 1.5rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            animation: fadeInUp 1s ease 0.2s;
            animation-fill-mode: both;
        }

        .hero-description {
            margin-bottom: 2rem;
            color: var(--text-tertiary);
            animation: fadeInUp 1s ease 0.4s;
            animation-fill-mode: both;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            animation: fadeInUp 1s ease 0.6s;
            animation-fill-mode: both;
        }

        .btn {
            display: inline-block;
            padding: 0.8rem 1.8rem;
            border-radius: 50px;
            font-weight: 600;
            transition: var(--transition-normal);
            cursor: pointer;
            text-align: center;
        }

        .btn-primary {
            background-color: var(--primary);
            color: white;
            box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
        }

        .btn-primary:hover {
            background-color: var(--primary-light);
            box-shadow: 0 6px 20px rgba(79, 70, 229, 0.6);
            transform: translateY(-2px);
            color: white;
        }

        .btn-secondary {
            background-color: transparent;
            color: var(--text-primary);
            border: 2px solid var(--primary);
        }

        .btn-secondary:hover {
            background-color: var(--primary);
            color: white;
            transform: translateY(-2px);
        }

        .hero-image {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-40%);
            width: 50%;
            z-index: 1;
            animation: floatAnimation 5s ease-in-out infinite;
        }

        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.1;
            background: radial-gradient(circle at 20% 30%, var(--primary-light) 0%, transparent 50%),
                         radial-gradient(circle at 80% 70%, var(--accent) 0%, transparent 50%);
        }

        @keyframes floatAnimation {
            0% {
                transform: translateY(-40%);
            }
            50% {
                transform: translateY(-45%);
            }
            100% {
                transform: translateY(-40%);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 特色区域 */
        .features {
            padding: 5rem 0;
            background-color: var(--bg-secondary);
        }

        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

        .section-title h2 {
            font-size: 2.5rem;
            display: inline-block;
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1rem;
        }

        .section-title p {
            color: var(--text-tertiary);
            max-width: 600px;
            margin: 0 auto;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .feature-card {
            background-color: var(--bg-primary);
            border-radius: 1rem;
            padding: 2rem;
            box-shadow: var(--card-shadow);
            transition: var(--transition-normal);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 0;
            background: linear-gradient(to bottom, var(--primary), var(--accent));
            transition: var(--transition-normal);
        }

        .feature-card:hover {
            transform: translateY(-10px);
        }

        .feature-card:hover::before {
            height: 100%;
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
            color: white;
            font-size: 1.5rem;
            transition: var(--transition-normal);
        }

        .feature-card:hover .feature-icon {
            transform: rotate(360deg);
            background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
        }

        .feature-title {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

        .feature-description {
            color: var(--text-tertiary);
            margin-bottom: 1.5rem;
            flex-grow: 1;
        }

        .feature-link {
            display: flex;
            align-items: center;
            color: var(--primary);
            font-weight: 600;
        }

        .feature-link i {
            margin-left: 5px;
            transition: var(--transition-normal);
        }

        .feature-link:hover i {
            transform: translateX(5px);
        }

        /* 博客预览 */
        .blog-preview {
            padding: 5rem 0;
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
        }

        .blog-card {
            background-color: var(--bg-primary);
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition-normal);
        }

        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .blog-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .blog-content {
            padding: 1.5rem;
        }

        .blog-category {
            display: inline-block;
            padding: 0.3rem 0.8rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 1rem;
            background-color: var(--bg-tertiary);
            color: var(--text-secondary);
        }

        .blog-title {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

        .blog-excerpt {
            color: var(--text-tertiary);
            margin-bottom: 1.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .blog-meta {
            display: flex;
            align-items: center;
            color: var(--text-tertiary);
            font-size: 0.9rem;
        }

        .blog-meta i {
            margin-right: 5px;
        }

        .blog-meta span:not(:last-child) {
            margin-right: 1rem;
        }

        /* 工具与游戏区域 */
        .tools-games {
            padding: 5rem 0;
            background-color: var(--bg-secondary);
        }

        .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 2rem;
        }

        .tab-btn {
            padding: 0.8rem 2rem;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-weight: 600;
            color: var(--text-secondary);
            position: relative;
            transition: var(--transition-normal);
        }

        .tab-btn.active {
            color: var(--primary);
        }

        .tab-btn::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 3px;
            background-color: var(--primary);
            transition: var(--transition-normal);
        }

        .tab-btn.active::after {
            width: 40px;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
        }

        .tool-card, .game-card {
            background-color: var(--bg-primary);
            border-radius: 1rem;
            padding: 2rem;
            text-align: center;
            box-shadow: var(--card-shadow);
            transition: var(--transition-normal);
            position: relative;
            overflow: hidden;
        }

        .tool-card:hover, .game-card:hover {
            transform: translateY(-5px);
        }

        .tool-card::after, .game-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
            transform: scaleX(0);
            transform-origin: left;
            transition: var(--transition-normal);
        }

        .tool-card:hover::after, .game-card:hover::after {
            transform: scaleX(1);
        }

        .tool-icon, .game-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: var(--bg-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2rem;
            color: var(--primary);
            transition: var(--transition-normal);
        }

        .tool-card:hover .tool-icon, .game-card:hover .game-icon {
            background-color: var(--primary);
            color: white;
            transform: scale(1.1);
        }

        .tool-title, .game-title {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

        .tool-description, .game-description {
            color: var(--text-tertiary);
            margin-bottom: 1.5rem;
        }

        /* AI 概念可视化 */
        .ai-visualization {
            padding: 5rem 0;
        }

        .mermaid {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            background-color: var(--bg-primary);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: var(--card-shadow);
        }

        /* 调用行动 */
        .cta {
            padding: 5rem 0;
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            color: white;
            text-align: center;
        }

        .cta-title {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .cta-description {
            max-width: 600px;
            margin: 0 auto 2rem;
            opacity: 0.9;
        }

        .btn-white {
            background-color: white;
            color: var(--primary);
        }

        .btn-white:hover {
            background-color: rgba(255, 255, 255, 0.9);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
        }

        .btn-outline-white {
            background-color: transparent;
            color: white;
            border: 2px solid white;
        }

        .btn-outline-white:hover {
            background-color: white;
            color: var(--primary);
            transform: translateY(-2px);
        }

        /* 页脚 */
        .footer {
            background-color: var(--bg-tertiary);
            padding: 4rem 0 2rem;
        }

        .footer-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

        .footer-column h3 {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            color: var(--text-primary);
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 0.8rem;
        }

        .footer-links a {
            color: var(--text-tertiary);
        }

        .footer-links a:hover {
            color: var(--primary);
        }

        .footer-social {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            transition: var(--transition-normal);
        }

        .social-icon:hover {
            background-color: var(--primary);
            color: white;
            transform: translateY(-3px);
        }

        .footer-bottom {
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid var(--bg-secondary);
            text-align: center;
            color: var(--text-tertiary);
            font-size: 0.9rem;
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .hero-title {
                font-size: 3rem;
            }
            
            .hero-image {
                width: 45%;
            }
        }

        @media (max-width: 768px) {
            .navbar-container {
                padding: 1rem;
            }
            
            .nav-links {
                position: fixed;
                top: 70px;
                left: 0;
                width: 100%;
                background-color: var(--bg-primary);
                flex-direction: column;
                align-items: center;
                padding: 2rem 0;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
                transform: translateY(-150%);
                transition: var(--transition-normal);
                z-index: 999;
            }
            
            .nav-links.active {
                transform: translateY(0);
            }
            
            .nav-links li {
                margin: 1rem 0;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero {
                height: auto;
                padding: 6rem 0 4rem;
                text-align: center;
            }
            
            .hero-content {
                max-width: 100%;
            }
            
            .hero-buttons {
                justify-content: center;
            }
            
            .hero-image {
                position: relative;
                width: 80%;
                margin: 3rem auto 0;
                transform: none;
                top: auto;
                right: auto;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .btn {
                padding: 0.7rem 1.5rem;
                font-size: 0.9rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .blog-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container navbar-container">
            <a href="#" class="logo">
                <i class="fas fa-robot"></i>
                AIwith.FUN
            </a>
            <ul class="nav-links">
                <li><a href="#home">首页</a></li>
                <li><a href="#blog">博客</a></li>
                <li><a href="#tools">工具箱</a></li>
                <li><a href="#games">游戏盒</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
            <div class="nav-right">
                <button class="theme-toggle" aria-label="切换深色/浅色模式">
                    <i class="fas fa-moon"></i>
                </button>
                <button class="mobile-menu-btn" aria-label="菜单">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero 区域 -->
    <section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">AI与乐趣的完美结合</h1>
                <h2 class="hero-subtitle">探索、学习、创造，体验AI带来的无限可能</h2>
                <p class="hero-description">AIwith.FUN 是一个将AI技术与趣味体验相结合的平台，我们提供丰富的学习资源、实用工具和有趣游戏，让科技融入生活的方方面面。</p>
                <div class="hero-buttons">
                    <a href="#features" class="btn btn-primary">开始探索 <i class="fas fa-arrow-right"></i></a>
                    <a href="#about" class="btn btn-secondary">了解更多</a>
                </div>
            </div>
            <div class="hero-image">
                <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" style="stop-color:#4F46E5;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <circle cx="250" cy="250" r="200" fill="url(#grad1)" opacity="0.1" />
                    <circle cx="250" cy="250" r="150" fill="url(#grad1)" opacity="0.2" />
                    <g fill="url(#grad1)">
                        <path d="M280,180 L320,180 L320,320 L280,320 Z" />
                        <path d="M180,180 L220,180 L220,320 L180,320 Z" />
                        <rect x="220" y="240" width="60" height="20" />
                        <circle cx="200" cy="200" r="15" />
                        <circle cx="300" cy="200" r="15" />
                    </g>
                </svg>
            </div>
            <div class="hero-background"></div>
        </div>
    </section>

    <!-- 特色区域 -->
    <section class="features" id="features">
        <div class="container">
            <div class="section-title">
                <h2>特色内容</h2>
                <p>我们提供多样化的内容和功能，满足您在学习、工作和娱乐方面的各种需求</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-book-open"></i>
                    </div>
                    <h3 class="feature-title">丰富博客</h3>
                    <p class="feature-description">我们的博客栏目包含精选的读书笔记、实用的英语学习技巧以及前沿的开发技术分享，为您提供全方位的知识更新。</p>
                    <a href="#blog" class="feature-link">探索博客 <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h3 class="feature-title">实用工具箱</h3>
                    <p class="feature-description">我们的工具箱提供各种实用功能，包括卡片导出工具，帮助您提高工作效率，简化日常任务。</p>
                    <a href="#tools" class="feature-link">使用工具 <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-gamepad"></i>
                    </div>
                    <h3 class="feature-title">趣味游戏盒</h3>
                    <p class="feature-description">在游戏盒中，您可以找到各种有趣的小游戏，包括记忆游戏等，让您在休闲时间也能获得乐趣和锻炼。</p>
                    <a href="#games" class="feature-link">玩游戏 <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!-- 博客预览 -->
    <section class="blog-preview" id="blog">
        <div class="container">
            <div class="section-title">
                <h2>最新博客</h2>
                <p>探索我们的最新文章，获取知识灵感</p>
            </div>
            <div class="blog-grid">
                <div class="blog-card">
                    <img src="https://source.unsplash.com/random/600x400/?book" alt="读书笔记" class="blog-image">
                    <div class="blog-content">
                        <span class="blog-category">读书笔记</span>
                        <h3 class="blog-title">《原子习惯》读书心得：如何构建持久的好习惯</h3>
                        <p class="blog-excerpt">在这篇读书笔记中，我分享了《原子习惯》一书的核心理念，以及如何通过微小的改变累积出惊人的结果。通过四个简单步骤，你可以建立起任何想要的好习惯...</p>
                        <div class="blog-meta">
                            <span><i class="far fa-calendar"></i> 2025-06-20</span>
                            <span><i class="far fa-clock"></i> 10分钟阅读</span>
                        </div>
                    </div>
                </div>
                <div class="blog-card">
                    <img src="https://source.unsplash.com/random/600x400/?english" alt="英语学习" class="blog-image">
                    <div class="blog-content">
                        <span class="blog-category">英语学习</span>
                        <h3 class="blog-title">高效掌握英语口语的5个实用技巧</h3>
                        <p class="blog-excerpt">很多人学习英语多年，却仍然无法流利地开口说。本文分享了5个提高英语口语的实用技巧，不需要出国留学，在家也能显著提升你的英语口语水平...</p>
                        <div class="blog-meta">
                            <span><i class="far fa-calendar"></i> 2025-06-15</span>
                            <span><i class="far fa-clock"></i> 8分钟阅读</span>
                        </div>
                    </div>
                </div>
                <div class="blog-card">
                    <img src="https://source.unsplash.com/random/600x400/?coding" alt="技术分享" class="blog-image">
                    <div class="blog-content">
                        <span class="blog-category">技术分享</span>
                        <h3 class="blog-title">React Hooks 完全指南：从入门到精通</h3>
                        <p class="blog-excerpt">React Hooks 彻底改变了我们编写 React 组件的方式。本文从基础概念开始，详细介绍了 useState、useEffect 等常用 Hooks 的使用方法和最佳实践...</p>
                        <div class="blog-meta">
                            <span><i class="far fa-calendar"></i> 2025-06-10</span>
                            <span><i class="far fa-clock"></i> 15分钟阅读</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 工具与游戏区域 -->
    <section class="tools-games" id="tools">
        <div class="container">
            <div class="section-title">
                <h2>工具与游戏</h2>
                <p>提升效率，享受乐趣</p>
            </div>
            <div class="tabs">
                <button class="tab-btn active" data-tab="tools">工具箱</button>
                <button class="tab-btn" data-tab="games">游戏盒</button>
            </div>
            <div class="tab-content active" id="tools-content">
                <div class="tool-card">
                    <div class="tool-icon">
                        <i class="fas fa-id-card"></i>
                    </div>
                    <h3 class="tool-title">卡片导出工具</h3>
                    <p class="tool-description">将您的笔记、想法或灵感轻松转换为精美的卡片，支持多种格式导出，适用于学习、演示或社交媒体分享。</p>
                    <a href="#" class="btn btn-primary">立即使用</a>
                </div>
                <div class="tool-card">
                    <div class="tool-icon">
                        <i class="fas fa-language"></i>
                    </div>
                    <h3 class="tool-title">AI 英语助手</h3>
                    <p class="tool-description">智能英语学习助手，提供发音纠正、语法检查和个性化学习建议，帮助您更有效地提升英语水平。</p>
                    <a href="#" class="btn btn-primary">立即使用</a>
                </div>
                <div class="tool-card">
                    <div class="tool-icon">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3 class="tool-title">代码片段生成器</h3>
                    <p class="tool-description">输入您的需求，AI 智能生成高质量的代码片段，支持多种编程语言，提高开发效率。</p>
                    <a href="#" class="btn btn-primary">立即使用</a>
                </div>
            </div>
            <div class="tab-content" id="games-content">
                <div class="game-card">
                    <div class="game-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3 class="game-title">记忆游戏</h3>
                    <p class="game-description">挑战您的记忆力！翻转卡片，找出配对，提升注意力和短期记忆能力，适合所有年龄段的用户。</p>
                    <a href="#" class="btn btn-primary">开始游戏</a>
                </div>
                <div class="game-card">
                    <div class="game-icon">
                        <i class="fas fa-puzzle-piece"></i>
                    </div>
                    <h3 class="game-title">AI 猜谜游戏</h3>
                    <p class="game-description">与 AI 进行智力对决！AI 会根据您的水平动态调整难度，提供个性化的猜谜体验。</p>
                    <a href="#" class="btn btn-primary">开始游戏</a>
                </div>
                <div class="game-card">
                    <div class="game-icon">
                        <i class="fas fa-font"></i>
                    </div>
                    <h3 class="game-title">单词接龙</h3>
                    <p class="game-description">趣味英语词汇游戏，扩展您的词汇量，提高英语思维能力，寓教于乐。</p>
                    <a href="#" class="btn btn-primary">开始游戏</a>
                </div>
            </div>
        </div>
    </section>

    <!-- AI 概念可视化 -->
    <section class="ai-visualization" id="ai-viz">
        <div class="container">
            <div class="section-title">
                <h2>AI 与趣味的关系</h2>
                <p>探索 AI 如何为我们的学习和生活带来乐趣</p>
            </div>
            <div class="mermaid">
                <pre class="mermaid-code">
flowchart TD
    AI[人工智能] --> |支持| Learn[学习]
    AI --> |增强| Tools[工具]
    AI --> |创造| Games[游戏]
    
    Learn --> Blog[博客内容]
    Learn --> Knowledge[知识获取]
    Learn --> Personalization[个性化学习]
    
    Tools --> Efficiency[提高效率]
    Tools --> Creation[创作辅助]
    Tools --> Automation[自动化处理]
    
    Games --> Fun[娱乐乐趣]
    Games --> Cognitive[认知训练]
    Games --> Interaction[互动体验]
    
    Blog & Knowledge & Personalization & Efficiency & Creation & Automation & Fun & Cognitive & Interaction --> Experience[增强用户体验]
    
    Experience --> |形成| AIwithFUN[AIwith.FUN]
    
    style AI fill:#4F46E5,stroke:#4F46E5,color:white
    style AIwithFUN fill:#8B5CF6,stroke:#8B5CF6,color:white,stroke-width:2px
                </pre>
            </div>
        </div>
    </section>

    <!-- 调用行动 -->
    <section class="cta">
        <div class="container">
            <h2 class="cta-title">准备好探索 AI 的无限可能了吗？</h2>
            <p class="cta-description">加入我们的社区，获取最新的 AI 资讯、工具和游戏，一起探索科技与乐趣的完美结合。</p>
            <div class="hero-buttons">
                <a href="#" class="btn btn-white">立即加入 <i class="fas fa-arrow-right"></i></a>
                <a href="#" class="btn btn-outline-white">了解更多</a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-container">
                <div class="footer-column">
                    <h3>关于我们</h3>
                    <ul class="footer-links">
                        <li><a href="#">我们的故事</a></li>
                        <li><a href="#">团队介绍</a></li>
                        <li><a href="#">联系方式</a></li>
                        <li><a href="#">加入我们</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>探索</h3>
                    <ul class="footer-links">
                        <li><a href="#blog">博客文章</a></li>
                        <li><a href="#tools">实用工具</a></li>
                        <li><a href="#games">趣味游戏</a></li>
                        <li><a href="#">资源下载</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>支持</h3>
                    <ul class="footer-links">
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">使用指南</a></li>
                        <li><a href="#">反馈建议</a></li>
                        <li><a href="#">隐私政策</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>关注我们</h3>
                    <p>获取最新的 AI 资讯和更新</p>
                    <div class="footer-social">
                        <a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-github"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-zhihu"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 AIwith.FUN. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 初始化 Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default',
            flowchart: {
                curve: 'basis'
            }
        });

        // 检测系统主题
        function detectColorScheme() {
            if (localStorage.getItem('theme')) {
                return localStorage.getItem('theme');
            }
            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }

        // 设置主题
        function setTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);
            
            const themeToggle = document.querySelector('.theme-toggle i');
            if (theme === 'dark') {
                themeToggle.className = 'fas fa-sun';
            } else {
                themeToggle.className = 'fas fa-moon';
            }

            // 重新渲染 Mermaid 图表
            mermaid.initialize({
                startOnLoad: true,
                theme: theme === 'dark' ? 'dark' : 'default'
            });
            const mermaidCode = document.querySelector('.mermaid-code').textContent;
            document.querySelector('.mermaid').innerHTML = `<pre class="mermaid-code">${mermaidCode}</pre>`;
            mermaid.init(undefined, document.querySelectorAll('.mermaid-code'));
        }

        // 初始化主题
        setTheme(detectColorScheme());

        // 主题切换
        document.querySelector('.theme-toggle').addEventListener('click', function() {
            const currentTheme = document.documentElement.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            setTheme(newTheme);
        });

        // 移动端菜单
        document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
            document.querySelector('.nav-links').classList.toggle('active');
            const icon = this.querySelector('i');
            if (icon.classList.contains('fa-bars')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            }
        });

        // 标签切换
        const tabBtns = document.querySelectorAll('.tab-btn');
        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                // 更新按钮状态
                tabBtns.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
                
                // 更新内容状态
                document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
                document.getElementById(`${tabId}-content`).classList.add('active');
            });
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 如果是在移动设备上，点击导航链接后关闭菜单
                    if (window.innerWidth <= 768) {
                        document.querySelector('.nav-links').classList.remove('active');
                        const icon = document.querySelector('.mobile-menu-btn i');
                        icon.classList.remove('fa-times');
                        icon.classList.add('fa-bars');
                    }
                }
            });
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--bg-primary');
                navbar.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.1)';
            } else {
                navbar.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--bg-primary');
                navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
            }
        });
    </script>
</body>
</html>